<template>
  <div id="patrol-main-container" class="main-container">
    <div class="alarm-msg-container" v-show="alarm.show">
      <div class="msg-div">
        <span>{{ alarm.msg }}</span>
      </div>
    </div>

    <div class="mc-left">
      <div class="mc-left-sub mc-left-1">
        <div class="sub-top">
          <div class="wc-left">
            <div class="icon"></div>
          </div>
          <div class="wc-right">
            <div class="wc-right-container">
              <div class="wc-right-top">监测人数</div>
              <div class="wc-right-bottom">234</div>
            </div>
          </div>
        </div>
        <div class="sub-bottom"></div>
      </div>

      <div class="mc-left-sub mc-left-2">
        <div class="sub-top">
          <h3>人员进场情况</h3>
        </div>
        <div class="sub-bottom">
          <div class="deptlist">
            <span
              v-for="dept in deptKeys"
              :key="dept"
              :ref="dept"
              @click="deptClick"
              class="deptitem"
            >
              {{ dept }}
            </span>
          </div>
          <div class="persontable">
            <dv-scroll-board v-if="personConfig" :config="personConfig" />
          </div>
        </div>
      </div>

      <div class="mc-left-sub mc-left-3">
        <div class="sub-top">
          <h3>告警信息</h3>
        </div>
        <div class="sub-bottom">
          <dv-scroll-board v-if="warnConfig" :config="warnConfig" />
        </div>
      </div>
    </div>

    <div class="mc-center">
      <a-select allowClear @change="taskChangeHandle" v-model="activeTaskid">
        <a-select-option
          v-for="item in patroltasks"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </div>

    <div class="mc-right">
      <div class="mc-right-sub mc-right-4">
        <div class="sub-top">
          <h3>巡视监测情况</h3>
        </div>
        <div class="sub-bottom">
          <dv-scroll-board v-if="monitorConfig" :config="monitorConfig" />
        </div>
      </div>
    </div>

    <div class="mc-bottom">
      <div
        v-for="(line, index) in patrollines"
        :key="index"
        class="type-item"
        :data-id="line.id"
        ref="item1"
        @click="lineChangeHandle"
      >
        <span class="text">{{ line.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import ChartBlock from "@components/ChartBlock";
import persondatas from "@/datas/person-enter.json";
import warninfodatas from "@/datas/warn-info.json";
import monitorinfodatas from "@/datas/monitor-info.json";

import { getValueByPath } from "@/utils/index.js";

export default {
  name: "patrol",
  components: {
    ChartBlock: ChartBlock
  },
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    let self = this; // 加上这一句就OK了
    return {
      //巡检路线
      patrollines: [
        {
          id: "line1",
          spline: "myspline2",
          duration: 30,
          name: "巡检路线1",
          isauto: true, //是否自动巡检
          //视角
          view: () => self.getViewConfig("line1"),
          // {
          //   location: {
          //     x: -10516.2685546875,
          //     y: 1482.43115234375,
          //     z: 5288.52880859375
          //   },
          //   pitch: -7.029561996459961,
          //   yaw: 4.775756359100342
          // },
          //巡检点位
          points: [
            {
              boxid: "TriggerBox2",
              isalarm: true,
              labelparam: {
                id: "list111",
                title: "3#水轮发电机组",
                location: { x: 100, y: 100, z: 100 },
                list: [
                  { name: "生产状态:", value: "正常" },
                  { name: "当前发电量:", value: "9999kwh" },
                  { name: "健康状态:", value: "良好" }
                ],
                tipBackgroundColor: "#4FA5F719",
                tipBorderColor: "#FF0000FF",
                tipText:
                  "生产厂家名称，用途说明用途说明，规格尺寸型号材aaaa质，颜色，生产日期等设备的基本信息"
              }
            },
            {
              boxid: "TriggerBox3",
              labelparam: {
                id: "list111",
                title: "5#水轮发电机组",
                location: { x: 100, y: 100, z: 100 },
                list: [
                  { name: "生产状态:", value: "正常" },
                  { name: "当前发电量:", value: "9999kwh" },
                  { name: "健康状态:", value: "良好" }
                ],
                tipBackgroundColor: "#4FA5F719",
                tipBorderColor: "#FF0000FF",
                tipText:
                  "生产厂家名称，用途说明用途说明，规格尺寸型号材aaaa质，颜色，生产日期等设备的基本信息aaa"
              }
            }
          ]
        },
        {
          id: "line2",
          spline: "myspline12",
          duration: 30,
          name: "巡检路线2",
          isauto: true, //是否自动巡检
          //视角
          view: {
            location: {
              x: -8494.970703125,
              y: -2026.2861328125,
              z: 6532.87109375
            },
            yaw: 19.5357723236084,
            pitch: -13.714049339294434
          }
        },
        {
          id: "line3",
          spline: "myspline3",
          duration: 30,
          name: "巡检路线3",
          isauto: false, //是否自动巡检
          //视角
          view: {
            location: {
              x: -4784.611328125,
              y: 773.7176513671875,
              z: 4941.79296875
            },
            yaw: 19.535873413085938,
            pitch: -13.714103698730469
          },
          //第一人称出生地
          person: {
            // (X=2593.418457,Y=701.800049,Z=4736.741699)
            location: {
              x: 2593.418457,
              y: 701.800049,
              z: 4736.741211
            }
            // pitch: -22.924217224121094,
            // yaw: -0.2944031059741974,
          },
          //巡检点位
          points: [
            {
              boxid: "TriggerBox_11",
              isalarm: true,
              labelparam: {
                id: "labelid_TriggerBox_11",
                title: "厂房进出门",
                location: { x: 100, y: 100, z: 100 },
                list: [
                  { name: "开合状态:", value: "正常" },
                  { name: "属性2:", value: "xxx" },
                  { name: "健康状态:", value: "良好" }
                ],
                tipBackgroundColor: "#4FA5F719",
                tipBorderColor: "#FF0000FF",
                tipText:
                  "生产厂家名称，用途说明用途说明，规格尺寸型号材aaaa质，颜色，生产日期等设备的基本信息"
              }
            }
          ]
        }
      ],
      //巡检任务
      patroltasks: [],
      //当前任务id
      activeTaskid: "",
      allPatroltasks: [
        {
          id: "task1",
          lineid: "line1",
          name: "任务1",
          person: "张三"
        },
        {
          id: "task2",
          lineid: "line1",
          name: "任务2",
          person: "李四"
        },
        {
          id: "task3",
          lineid: "line1",
          name: "任务3",
          person: "王五"
        },
        {
          id: "task4",
          lineid: "line2",
          name: "任务4",
          persons: "赵六"
        },
        {
          id: "task5",
          lineid: "line2",
          name: "任务5",
          persons: "孙七"
        },
        {
          id: "task6",
          lineid: "line2",
          name: "任务6",
          persons: "王八"
        },
        {
          id: "task7",
          lineid: "line3",
          name: "任务7",
          persons: "王八"
        }
      ],
      persons: [
        {
          name: "张三",
          post: "岗位名称",
          dept: "部门名称",
          worknum: "工号",
          place: "湖北省武汉市武昌区和平大道515号绿地蓝海大厦A座",
          id: "personid1",
          location: {
            x: -5355.28662109375,
            y: 682.8953857421875,
            z: 3889.07275390625
          }
        },
        {
          name: "李四",
          post: "岗位名称",
          dept: "部门名称",
          worknum: "工号",
          place: "湖北省武汉市武昌区和平大道515号绿地蓝海大厦A座",
          id: "personid2",
          location: {
            x: -5760.1201171875,
            y: 683.2874755859375,
            z: 4739.17431640625
          }
        },
        {
          name: "王五",
          post: "岗位名称",
          dept: "部门名称",
          worknum: "工号",
          place: "湖北省武汉市武昌区和平大道515号绿地蓝海大厦A座",
          id: "personid3",
          location: {
            x: -9301.572265625,
            y: 1795.3897705078125,
            z: 4854.5546875
          }
        }
      ],
      //已经显示人员的id列表
      showLabelIds: [],
      //人员图标
      personIconUrl: "http://192.168.10.100:3040/static/imgs/person.png",
      bgIconUrl: "http://192.168.10.100:3040/static/imgs/bg2.png",
      personConfig: null,
      warnConfig: null,
      monitorConfig: null,
      //轮播表的配置
      boardConfig: {
        // rowNum: 4,
        // headerHeight: 30,
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)"
      },
      boardConfig2: {
        // rowNum: 4,
        // headerHeight: 30,
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)"
      },
      boardConfig3: {
        // rowNum: 4,
        // headerHeight: 30,
        headerBGC: "rgba(31,248,230,0.2)",
        oddRowBGC: "rgba(31,248,230,0.05)",
        evenRowBGC: "rgba(31,248,230,0.1)"
      },
      //人员进场情况数据
      persondata: {},
      // 人员定位数据
      personPoints: [
        {
          id: "mark_peson1",
          state: "normal",
          title: "张三",
          post: "施工员",
          depart: "部门1",
          workNum: "1001",
          position: "位置1",
          location: {
            x: -3127.681396484375,
            y: 1077.4888916015625,
            z: 4760.38671875
          }
        },
        {
          id: "mark_peson2",
          state: "unnormal",
          title: "李四",
          post: "车间组长",
          depart: "部门2",
          workNum: "1002",
          position: "位置2",
          location: {
            x: -10129.9736328125,
            y: 1691.3311767578125,
            z: 5726.79345703125
          }
        }
      ],
      //警告
      alarm: {
        msg: "警告：张三正处于危险区域",
        show: false
      }
    };
  },
  methods: {
    //页面的默认加载事件
    initPage() {
      let ue4Viewer = this.ue4Viewer;
      //添加监测点
      // this.addMarkLabel();
      this.addMonitorLabel();
      setTimeout(() => {
        //人员进场情况
        this.initEnterPerson();
        this.initWarnInfo();
        this.initMonitorInfo();
      });
      if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
        this.addLabelEvent();
        this.addCustomEvent();
        ue4Viewer.setSelectedNodeByue4Id(this.ue4Pick);
      }
    },
    //页面切换后事件
    unloadPage() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.thirdPerson();
    },
    /**
     * 获取视角配置
     * @param {*}
     * */
    getViewConfig(id) {
      let result = null;
      if (this.$view) {
        result = getValueByPath(this.$view, "patrol.lines." + id);
      }
      return result;
    },
    //pick事件
    ue4Pick(e) {},
    //新增custom事件
    addCustomEvent() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.addCustomEvent(e => {
        //预警类型：打开小标签窗口
        if (e.type === "alarm") {
          if (this.activeTaskid) {
            let task = this.allPatroltasks.find(x => x.id == this.activeTaskid);
            if (task) {
              this.alarm.msg =
                "警告：" +
                e.data.labelparam.title +
                "，" +
                task.person +
                "正处于危险区域";
            }
          }

          this.alarm.show = true;
          setTimeout(() => {
            this.alarm.show = false;
          }, 2 * 1000);
        }

        //box类型：
        if (e.type === "intobox") {
          let line = this.activeLine;
          if (line && line.points) {
            for (let i = 0; i < line.points.length; i++) {
              const point = line.points[i];

              //可以点击物体进行触发的范围
              if (point.boxid === e.boxid) {
                //进入
                if (e.into) {
                  //需要报警
                  if (point.isalarm) {
                    this.alarm.msg =
                      "警告：" +
                      point.labelparam.title +
                      "，" +
                      "当前正处于危险区域";

                    this.alarm.show = true;
                  }

                  //弹信息框
                  this.addLabelInfo(point);
                } else {
                  //离开
                  //隐藏标签
                  ue4Viewer.removeAllMark(point.labelparam.id);
                  this.alarm.show = false;
                }
                break;
              }
            }
          }
        }
      });
    },
    //新增标签
    addLabelInfo(data) {
      this.removeAllMark();
      if (data.labelparam) {
        //新增信息框
        let d = {
          id: data.labelparam.id,
          title: data.labelparam.title,
          // objectid: data.ue4Id,
          // location: task.location,
          valueColor: "#ff0000cc",
          list: data.labelparam.list,
          tipText: data.labelparam.tipText
        };
        if (data.boxid) {
          d.objectid = data.boxid;
        } else {
          d.location = data.labelparam.location;
        }
        let a = [d];
        let p = {
          type: "list",
          scale: 1,
          offset: { x: 0, y: 0 },
          clickable: true,
          config: a
          // backgroundUrl: this.bgIconUrl,
        };
        setTimeout(() => {
          console.log(p);
          this.ue4Viewer.addUpdateLabel(p);
        });
      }
    },
    //标签点击事件
    addLabelEvent() {
      this.ue4Viewer.addLabelEvent(e => {
        console.log("labelEvent", e);
        //打开小标签窗口
        if (e.type === 0) {
          this.addMonitorLabel(e.id);
          this.showPersonInfo(e.id);
        }
      });
    },
    // 新增标签
    addMarkLabel() {
      let param = {
        type: "mark",
        scale: 1,
        offset: { x: 0, y: 0 },
        clickable: true,
        config: []
      };

      let points = this.personPoints || [];
      let config = [];
      for (let i = 0; i < points.length; i++) {
        const point = points[i];

        if (point.location && Object.keys(point.location).length > 0) {
          let p = {
            id: point.id,
            title: point.title,
            location: point.location,
            // icon: point.state === "normal" ? "mark3" : "mark2",
            iconUrl: "http://localhost:8020/static/imgs/person.png"
            // value: "9999",
            // valueColor: "#ff0000cc",
          };
          config.push(p);
        } else if (point.objectid) {
          let p = {
            id: point.id,
            title: point.title,
            objectid: point.objectid,
            // icon: point.state === "normal" ? "mark3" : "mark2",
            iconUrl: "http://localhost:8020/static/imgs/person.png"
          };
          config.push(p);
        }
      }
      if (config.length > 0) {
        param.config = config;
        if (this.ue4Viewer && Object.keys(this.ue4Viewer).length != 0) {
          this.ue4Viewer.addUpdateLabel(param);
        }
      }
    },
    // 新增标签
    addMonitorLabel(labelid) {
      let param = {
        type: "monitor",
        scale: 1,
        offset: { x: 30, y: 0 },
        config: [
          {
            id: "monitor1",
            clickable: true,
            // objectid: "S_ZSMC_24",
            title: "李四",
            state: "警告"
            // time: "2022-11-11 14:17:39",
            // pressure: "99.99",
            // temp: "36.85℃",
          }
        ]
      };

      let points = this.personPoints || [];
      let config = [];
      for (let i = 0; i < points.length; i++) {
        const point = points[i];
        if (point.id === labelid) {
          if (point.location && Object.keys(point.location).length > 0) {
            let p = {
              id: "monitor_" + point.id,
              clickable: true,
              title: point.title,
              state: point.state === "normal" ? "正常" : "警告",
              post: point.post,
              // time: point.time,
              // pressure: point.monitor.osmolarity,
              // temp: point.monitor.temperature,
              location: point.location
            };

            config.push(p);
          } else if (point.objectid) {
            let p = {
              id: "monitor_" + point.id,
              clickable: true,
              title: point.title,
              state: point.state === "normal" ? "正常" : "警告",
              post: point.post,
              // time: point.time,
              // pressure: point.monitor.osmolarity,
              // temp: point.monitor.temperature,
              objectid: point.objectid
            };
            config.push(p);
          }
          break;
        }
      }
      if (config.length > 0) {
        param.config = config;
        console.log("config", config);
        this.ue4Viewer.addUpdateLabel(param);
      }
    },
    //移除所有标签
    removeAllMark() {
      this.ue4Viewer.removeAllMark("person*");
    },
    //告警信息
    initWarnInfo() {
      let data = [];
      let content;
      for (let i = 0; i < warninfodatas.rows.length; i++) {
        const row = warninfodatas.rows[i];
        content = '<span style="color:#FF0000;">' + row.info + "</span>";
        data.push([row.time, row.name, content]);
      }
      let config = {
        rowNum: 5,
        headerHeight: 30,
        columnWidth: [150, 80],
        header: ["时间", "姓名", "内容"],
        data: data
      };
      console.log("config.data[3].content", config.data);
      this.warnConfig = Object.assign(this.boardConfig2, config);
    },
    //巡查监测情况
    initMonitorInfo() {
      let data = [];
      let content;
      for (let i = 0; i < monitorinfodatas.rows.length; i++) {
        const row = monitorinfodatas.rows[i];
        content = '<span style="color:#FF0000;">' + row.abnormal + "</span>";
        data.push([row.route, row.name, row.time, content, row.leader]);
      }
      let config = {
        rowNum: 7,
        headerHeight: 30,
        columnWidth: [90, 65, 95, 65],
        header: ["巡查路线", "姓名", "巡查日期", "异常数", "负责人"],
        data: data
      };
      console.log("config.data[3].content", config.data);
      this.monitorConfig = Object.assign(this.boardConfig3, config);
    },
    //初始化人员数据
    initEnterPerson() {
      let datas = persondatas.rows;
      let persondata = {};
      let depts = [];
      for (let i = 0; i < datas.length; i++) {
        const data = datas[i];
        if (persondata[data.unitname]) {
          persondata[data.unitname].push(data);
        } else {
          persondata[data.unitname] = [];
          depts.push(data.unitname);
        }
      }
      // let dept1 = persondatas.filter((x) => x.unit === "1");
      // let dept2 = persondatas.filter((x) => x.unit === "2");
      // let dept3 = persondatas.filter((x) => x.unit === "3");
      this.persondata = persondata;

      if (depts.length > 0) {
        this.$nextTick(() => {
          let ref = this.$refs[depts[0]];
          if (ref) {
            if (Array.isArray(ref) && ref.length > 0) {
              ref[0].click();
            } else {
              ref.click();
            }
          }
        });
      }

      return depts;
    },
    //部门切换
    deptClick(e) {
      let curele = e.currentTarget;
      let pele = curele.parentElement;

      //切换active 的class
      for (let i = 0; i < pele.childElementCount; i++) {
        const ele = pele.children[i];
        if (ele.classList.contains("active")) {
          if (ele != curele) {
            ele.classList.remove("active");
          }
        } else {
          if (ele === curele) {
            ele.classList.add("active");
          }
        }
      }

      //切换数据
      let text = e.currentTarget.innerText;
      let data = this.persondata[text].map(x => {
        return [x.work_num, x.name, x.post, x.time];
      });
      let config = {
        rowNum: 5,
        headerHeight: 30,
        header: ["工号", "姓名", "岗位", "时间"],
        columnWidth: [80, 80, 90],
        data: data
      };
      this.personConfig = { ...this.boardConfig, ...config }; // config; //
      // this.$refs['scrollBoard'].updateRows(data)
    },
    //巡检任务切换
    taskChangeHandle(value, option) {
      console.log("taskChangeHandle", value, option);
      //移除所有的人员
      this.removeAllMark();
      if (value) {
        this.activeTaskid = value;
        // let task = this.patroltasks.find((x) => x.id === value);
        // if (task) {
        //自动巡检
        let line = this.activeLine; //this.patrollines.find((x) => x.id === task.lineid);
        if (line) {
          if (line.isauto) {
            //隐藏所有的label
            this.ue4Viewer.removeAllMark();
            this.ue4Viewer.autoXunjian(line.spline, line.points, line.duration);
            setTimeout(() => {
              //显示人员定位信息
              this.showPersonPosition(this.persons);
            }, line.duration * 1000);
          } else {
            let p = {
              ...line.person
            };
            //第一人称巡检
            this.ue4Viewer.firstPerson(p.location, p.pitch, p.yaw);
          }
        }
        // }
      }
    },
    //显示人员信息
    showPersonInfo(labelid) {
      let pesonlist = this.persons;
      //显示人员定位信息
      let d = pesonlist
        .filter(x => x.id == labelid)
        .map(x => {
          let d = {
            id: x.id + "_list",
            title: x.name,
            location: x.location,
            valueColor: "#ff0000cc",
            list: [
              {
                name: "岗位：",
                value: x.post
              },
              {
                name: "部门：",
                value: x.dept
              },
              {
                name: "工号：",
                value: x.worknum
              },
              {
                name: "位置：",
                value: x.place
              }
            ]
          };
          return d;
        });

      //已经显示的标签，进行隐藏
      if (this.showLabelIds.includes(labelid)) {
        this.ue4Viewer.removeAllMark(d.map(x => x.id).join(","));

        let arr = this.showLabelIds;
        for (let i = arr.length - 1; i >= 0; i--) {
          if (arr[i] == labelid) {
            arr.splice(i, 1);
            break;
          }
        }
        this.showLabelIds = arr;
        return;
      }

      let p = {
        type: "list",
        scale: 1,
        offset: { x: 10, y: -20 },
        clickable: true,
        config: d,
        backgroundUrl: this.bgIconUrl
      };
      this.ue4Viewer.addUpdateLabel(p);
      this.showLabelIds.push(labelid);
    },
    //显示人员定位信息
    showPersonPosition(pesonlist) {
      //新增点
      let persons = pesonlist.map(x => {
        return {
          id: x.id,
          // title: x.name,
          location: x.location,
          iconUrl: this.personIconUrl
        };
      });

      let param = {
        type: "mark",
        scale: 1,
        offset: { x: 0, y: 0 },
        clickable: true,
        config: persons
      };

      this.ue4Viewer.addUpdateLabel(param);
    },
    //巡检路线切换
    lineChangeHandle(e) {
      let ue4Viewer = this.ue4Viewer;
      this.activeTaskid = null;

      let curele = e.currentTarget;
      let pele = curele.parentElement;

      //切换active 的class
      for (let i = 0; i < pele.childElementCount; i++) {
        const ele = pele.children[i];
        if (ele.classList.contains("active")) {
          if (ele != curele) {
            ele.classList.remove("active");
          }
        } else {
          if (ele === curele) {
            ele.classList.add("active");
          }
        }
      }

      //切换视角
      let dataid = curele.getAttribute("data-id");
      let line = this.patrollines.find(x => x.id == dataid);
      if (!line) {
        return;
      }
      //如果不是人工巡检，就切换到第三人称
      if (line.isauto !== false) {
        ue4Viewer.thirdPerson();
      }

      let param = line.view;
      if (typeof line.view === "function") {
        param = line.view();
      }
      console.log("patrol param", param);
      this.ue4Viewer.flytoByParam(param);

      //显示人员信息
      setTimeout(() => {
        this.showPersonPosition(this.persons);
      }, 2 * 1000);

      //获取所有的任务
      this.patroltasks = this.allPatroltasks.filter(x => x.lineid === line.id);

      // //移除所有标签
      // ue4Viewer.removeAllMark();
      // // 选中默认的任务
      // if (this.patroltasks.length > 0) {
      //   let firstTask = this.patroltasks[0];
      //   this.activeTaskid = firstTask.id;
      //   this.taskChangeHandle(firstTask.id, null);
      // } else {
      //   this.activeTaskid = null;
      //   this.removeAllMark();
      // }
    }
  },
  computed: {
    //部门列表
    deptKeys() {
      return Object.keys(this.persondata);
    },
    //当前任务
    activeTask() {
      if (this.activeTaskid) {
        let task = this.allPatroltasks.find(x => x.id == this.activeTaskid);
        return task;
      }
      return null;
    },
    //当前线路
    activeLine() {
      if (this.activeTask) {
        let line = this.patrollines.find(x => x.id === this.activeTask.lineid);
        return line;
      }
      return null;
    }
  }
};
</script>

<style lang="less" scoped>
#patrol-main-container {
  .alarm-msg-container {
    top: 0px;
    height: 40px;
    width: 100%;
    position: absolute;
    align-items: center;
    display: flex;
    justify-content: center;
    visibility: visible;

    .msg-div {
      height: 100%;
      width: auto;
      background: #aa1520;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      padding: 10px 25px;
    }
  }

  .mc-right {
    position: absolute;
    right: 0px;
    padding-right: 20px;

    .mc-right-sub {
      // margin-top: 20px;
      width: 100%;
      // height: 224px;
      height: 37.577002%;
      padding-top: 0px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-right-4 {
      .sub-bottom {
        height: calc(100% - 13px);

        .dv-scroll-board {
          margin-left: 30px;
          overflow: hidden;
          height: calc(100% - 13px);
          width: calc(100% - 50px);
        }
      }
    }
  }

  .mc-left,
  .mc-right {
    visibility: visible;
    height: 100%;
    width: 476px;
    padding-left: 20px;
    padding-top: 15px;

    .mc-left-sub {
      // margin-top: 20px;
      width: 100%;
      // height: 224px;
      height: 37.577002%;
      padding-top: 20px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-left-1 {
      // height: 224px;
      height: 22.997947%;
      margin-top: 0px;
      padding-top: 0px;

      .sub-top {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: calc(100% - 5px);
        display: flex;

        .wc-left {
          width: 220px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            width: 166px;
            height: 136px;
            margin-left: 54px;
            // margin-top: 6px;
            // margin-top: calc(50% - 83px); //(100% + 30 - 136)/2 - 30
            margin-top: 5px;
            background-image: url(../../assets/svg/person.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }

        .wc-right {
          width: calc(100% - 220px);
          padding-left: 40px;
          text-align: left;
          display: flex;
          justify-content: left;
          align-items: center;

          .wc-right-top {
            // line-height: 35px;
            // margin-top: 18px;
            height: 36px;
            font-size: 22px;
            // margin-top: 40px;
            color: #fff;
          }

          .wc-right-bottom {
            font-size: 36px;
            color: #1ff8e6;
          }
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 8px;
        display: flex;
      }
    }

    .mc-left-2 {
      // height: 366px;//margin-top:20px;

      .sub-bottom {
        height: calc(100% - 44px);

        .deptlist {
          width: auto;
          height: 30px;
          display: inline-flex;
          margin-top: 5px;
          margin-bottom: 10px;
          border-radius: 1px;

          .deptitem {
            line-height: 30px;
            width: 90px;
            height: 100%;
            text-align: center;
            cursor: pointer;
            color: #fff;
            background-color: rgba(31, 248, 230, 0.2);
            border-left: 1px solid #1ff8e60d;
          }

          .active {
            color: #000;
            background-color: #1ff8e6;
          }
        }

        .persontable {
          height: calc(100% - 47px);

          .dv-scroll-board {
            margin-left: 30px;
            height: 100%;
            width: calc(100% - 50px);
          }
        }
      }
    }

    .mc-left-3 {
      .sub-bottom {
        height: calc(100% - 46px);

        .dv-scroll-board {
          margin-left: 30px;
          height: calc(100% - 13px);
          width: calc(100% - 50px);
        }
      }
    }
  }

  .mc-center {
    width: 195px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 25px;
    max-height: 100%;

    .ant-select {
      visibility: visible;
      width: 170px;
      // height: 40px;
    }

    /deep/.ant-select-selection {
      background-color: unset;
      border-radius: 16px;
      border: 1px solid #1ff8e680;

      .ant-select-arrow-icon {
        color: #1ff8e680;
      }

      .ant-select-selection-selected-value {
        color: #fff;
      }
    }

    /deep/.ant-select-selection,
    /deep/.ant-select-selection:focus,
    /deep/.ant-select-selection:active {
      box-shadow: unset;
    }
  }

  .mc-bottom {
    position: absolute;
    bottom: 0px;
    height: auto !important;
    width: 100% !important;
    justify-content: center;

    .type-item {
      background-image: url(../../assets/svg/Button2-1.svg);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      visibility: visible;
      height: 52px;
      width: 140px;
      margin-left: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;

      &.active {
        background-image: url(../../assets/svg/Button2-2.svg);
      }
    }

    .type-item-3 {
      width: 200px;
      background-image: unset;
      justify-content: flex-start;
      position: relative;

      .item-left {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .item-right {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: initial;

        .text {
          white-space: nowrap;
          position: absolute;
          left: 40px;
        }
      }

      &.active {
        background-image: unset;

        .item-left {
          background-image: url(../../assets/svg/Button2-2.svg);
        }

        .item-right {
          background-image: url(../../assets/svg/Button2-2.svg);
        }
      }
    }
  }

  .ant-modal-root {
    .ant-modal-mask {
      visibility: visible;
    }

    .ant-modal-wrap {
      visibility: visible;

      .ant-modal {
        width: 600px;
        height: 288px;
        padding-bottom: 0px;
      }

      .ant-modal-content {
        height: 100%;
        width: 100%;
        background-image: url(../../assets/svg/diaBg04.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #fff0;

        .ant-modal-header {
          background: none;
          border: none;
          height: 34px;
          text-indent: 15px;
          padding-top: 7px;

          .ant-modal-title {
            color: #ffffff;
            font-size: 20px;
            margin-top: 4px;
          }
        }

        .ant-modal-body {
          padding: 0px;
          height: calc(100% - 34px);

          .search {
            height: 35px;

            .datesearch {
              width: 270px;
              height: 28px;
              margin-top: 20px;
              margin-left: 154px;
              border-radius: 28px;
              border: 1px solid #1ff8e6;
              display: flex;

              .dateicon {
                background-image: url(../../assets/svg/Calendar.svg);
                background-position: top center;
                background-repeat: no-repeat;
                background-size: contain;
                width: 12px;
                height: 12px;
                margin-top: 7px;
                margin-left: 10px;
              }

              .ant-calendar-picker {
                width: calc(100% - 62px);
              }

              .datebutton {
                background-color: #1ff8e6;
                height: 100%;
                width: 50px;
                border-top-right-radius: 26px;
                border-bottom-right-radius: 26px;
                text-align: center;
                line-height: 26px;
                cursor: pointer;
                pointer-events: all;
              }
            }
          }

          .table {
            width: calc(100% - 30px);
            height: calc(100% - 72px);
            margin-left: 20px;

            .dv-scroll-board {
              width: 100%;
            }
          }
        }
      }

      .modal-close {
        width: 25px;
        height: 25px;
        background-image: url(../../assets/svg/Close.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        pointer-events: all;
      }
    }
  }
}
</style>
<style lang="less">
#patrol-main-container {
  .search {
    .ant-calendar-picker {
      margin-top: 3px;
      width: 200px;

      .ant-input {
        background-color: #fff0;
        border: none;
      }

      .ant-calendar-picker-clear {
        background-color: #fff0;
        color: #fff;
        margin-left: 2px;
        right: 5px;
      }
    }
  }

  .ant-select-selection__clear {
    background-color: unset;
  }
}
</style>
